<template>
	<view class="chat-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="room-name">喃喃的直播间</text>
			<text class="viewer-count">2.2万人观看</text>
		</view>

		<!-- 聊天消息列表 -->
		<scroll-view class="message-list" scroll-y :scroll-top="scrollTop" scroll-with-animation>
			<view v-for="(msg, index) in messages" :key="index" class="message-wrap"
				:class="{'user-msg': msg.sender === 'user', 'other-msg': msg.sender !== 'user'}">
				<view class="message-bubble">{{ msg.content }}</view>
			</view>
		</scroll-view>

		<!-- 底部输入区域 -->
		<view class="input-container">
			<input type="text" v-model="inputText" placeholder="说点什么..." class="input-box" @confirm="handleSend" />
			<view class="func-buttons">
				<button class="func-btn share-btn">分享</button>
				<button class="func-btn more-btn" @click="showMoreModal = true">更多</button>
			</view>
			<button class="send-btn" @click="handleSend">结束</button>
		</view>

		<!-- 更多功能弹窗 -->
		<view class="modal-mask" v-if="showMoreModal" @click="showMoreModal = false">
			<view class="modal-content" @click.stop>
				<view class="modal-title">更多</view>
				<view class="modal-grid">
					<view class="grid-item" @click="handleComment">
						<image class="grid-icon" src="/static/broadcast/Frame(4).png"></image>
						<text class="grid-text">评论</text>
					</view>
					<view class="grid-item" @click="flipCamera">
						<image class="grid-icon" src="/static/broadcast/Frame(3).png"></image>
						<text class="grid-text">镜头翻转</text>
					</view>
					<view class="grid-item" @click="pauseLive">
						<image class="grid-icon" src="/static/broadcast/Frame(1).png"></image>
						<text class="grid-text">暂停直播</text>
					</view>
					<view class="grid-item" @click="changeQuality">
						<image class="grid-icon" src="/static/broadcast/Frame(2).png"></image>
						<text class="grid-text">清晰度</text>
					</view>
					<!-- <view class="grid-item" @click="sendRedPacket">
						<image class="grid-icon" src="/static/broadcast/Frame(5).png"></image>
						<text class="grid-text">红包</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 暂停弹框 -->
		<view class="confirm-modal" v-if="showPauseModal">
			<view class="confirm-content">
				<view class="confirm-title">暂停直播</view>
				<view class="confirm-text">
					暂停直播后，观众无法接收画面和声音，
					<br />
					最多暂停5分钟，超时直播将自动结束。
				</view>
				<view class="confirm-buttons">
					<button class="confirm-btn cancel-btn" @click="showPauseModal = false">取消</button>
					<button class="confirm-btn ok-btn" @click="confirmPause">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputText: '',
				messages: [

				],
				scrollTop: 0,
				showMoreModal: false,
				showPauseModal: false,
				isLivePaused: false
			};
		},
		methods: {
			// 处理消息发送
			handleSend() {
				const content = this.inputText.trim();
				if (!content) return;

				this.messages.push({
					content: content,
					sender: 'user'
				});

				this.inputText = '';
				this.scrollToBottom();
			},

			// 滚动到消息列表底部
			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollTop = 99999;
				});
			},

			// 更多功能相关方法
			handleComment() {
				uni.showToast({
					title: '评论功能',
					icon: 'none'
				});
				this.showMoreModal = false;
			},

			flipCamera() {
				uni.showToast({
					title: '镜头翻转',
					icon: 'none'
				});
				this.showMoreModal = false;
			},

			pauseLive() {
				uni.showToast({
					title: '暂停直播',
					icon: 'none'
				});
				this.showMoreModal = false;
			},

			changeQuality() {
				uni.showActionSheet({
					itemList: ['流畅', '标清', '高清'],
					success: (res) => {
						uni.showToast({
							title: `已切换至${['流畅', '标清', '高清'][res.tapIndex]}`,
							icon: 'none'
						});
					}
				});
				this.showMoreModal = false;
			},

			sendRedPacket() {
				uni.showToast({
					title: '发送红包',
					icon: 'none'
				});
				this.showMoreModal = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.chat-page {
		display: flex;
		flex-direction: column;
		height: 94vh;
		background-color: #121212;
		position: relative;
	}

	/* 顶部导航 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: #1a1a1a;
		color: #ffffff;

		.room-name {
			font-size: 16px;
			font-weight: 600;
		}

		.viewer-count {
			font-size: 14px;
			color: #cccccc;
		}
	}

	/* 消息列表 */
	.message-list {
		flex: 1;
		padding: 16px;
		overflow: auto;
	}

	.message-wrap {
		margin-bottom: 20px;
		display: flex;

		&.user-msg {
			justify-content: flex-end;

			.message-bubble {
				background-color: #007aff;
				color: #ffffff;
			}
		}

		&.other-msg {
			justify-content: flex-start;

			.message-bubble {
				background-color: #333333;
				color: #ffffff;
			}
		}
	}

	.message-bubble {
		max-width: 70%;
		padding: 10px 14px;
		border-radius: 16px;
		font-size: 14px;
		line-height: 1.4;
		word-wrap: break-word;
	}

	/* 输入区域 */
	.input-container {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background-color: #1a1a1a;
		border-top: 1px solid #333333;

		.input-box {
			flex: 1;
			height: 36px;
			padding: 0 12px;
			margin-right: 10px;
			background-color: #333333;
			color: #ffffff;
			border-radius: 18px;
			font-size: 14px;
		}

		.func-buttons {
			display: flex;
			margin-right: 10px;

			.func-btn {
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				margin-left: 8px;
				background: transparent;
				color: #ffffff;
				font-size: 14px;
				border-radius: 15px;
			}
		}

		.send-btn {
			height: 36px;
			line-height: 36px;
			padding: 0 16px;
			background-color: red;
			color: #ffffff;
			border-radius: 18px;
			font-size: 14px;
			margin-left: 10px;
		}
	}

	/* 更多功能弹窗样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 999;
	}

	.modal-content {
		width: 100%;
		background-color: white;
		border-radius: 16px 16px 0 0;
		padding: 20px;
		box-sizing: border-box;
	}

	.modal-title {
		color: black;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.modal-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #000;
		justify-content: center;
	}

	.grid-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.grid-text {
		color: black;
		font-weight: 700;
		font-size: 12px;
		text-align: center;
	}
</style>